<script>
// 导入 Window1 组件
import Window1 from '../view/Window1.vue';
import Window2 from "./Window2.vue";
import Window3 from "./Window3.vue";
import Window4 from "./Window4.vue";

export default {
  components: {
    Window1, Window2, Window3, Window4
  },
  methods: {
    handleWindow1Close() {
      this.showWindow1 = false;
    },
    handleWindow2Close() {
      this.showWindow2 = false;
    },
    handleWindow3Close() {
      this.showWindow3 = false;
    },
    handleWindow4Close() {
      this.showWindow4 = false;
    },
  },
  data() {
    return {
      showWindow1: true,
      showWindow2: true,
      showWindow3: true,
      showWindow4: true,
    };
  },
};
</script>

<template>
  <div id="mainFirstCon" class="bg">
    <div dv-bg>
      <!--    内容第一行-->
      <div class="module-box" style="padding: 0px 5px 2px 5px">
        <!--        左边-->
        <div style="flex: 0 1 25%;height: 440px">
          <!--          上面:window1-->
          <dv-border-box8 style="height: 220px" v-if="showWindow1">
            <Window1 @closeWindow="handleWindow1Close"/>
          </dv-border-box8>

          <!--          下面:window2-->
          <dv-border-box8 style="height: 220px;transform: rotateY(180deg)">
            <div style="transform: rotateY(180deg)" v-if="showWindow2">
              <Window2 @closeWindow="handleWindow2Close"/>
            </div>
          </dv-border-box8>
        </div>

        <!--        中间-->
        <div style="flex: 0 1 50%;height: 440px">
          <dv-border-box8 v-if="showWindow3">
            <div dv-bg >
              <window3 @closeWindow="handleWindow3Close"/>
            </div>
          </dv-border-box8>
        </div>

        <!-- 右边 -->
        <div style="flex: 0 1 25%; height: 440px; transform: rotateY(180deg)">
          <!-- window4 -->
          <dv-border-box8 v-if="showWindow4">
            <div dv-bg style="height: 100%; display: flex; flex-direction: column-reverse; transform: rotateY(180deg)">
              <Window4 @closeWindow="handleWindow4Close"/>
            </div>
          </dv-border-box8>
        </div>


      </div>
    </div>
  </div>
</template>

<style scoped>
.bg {
  background: url('../assets/img/pageBg.png') no-repeat center center;
  background-size: cover;
  height: 100%;
  width: 100%;
  color: white;
}

</style>